<template>
    <fieldset>
        <legend>keep-alive</legend>
        <button @click="handleClick1">tab1</button>
        &nbsp;
        <button @click="handleClick2">tab2</button>
        
        <keep-alive exclude="tab">
            <div :is="tabs"></div>
        </keep-alive>
    </fieldset>
</template>

<script>
    import News from './News/index.vue'
    import Tab from '@/components/Tab'
    // 属性
    // include 需要被缓存的组件名，
    // exclude 不需要被缓存的组件名，
    // max 最多缓存几个，最早进来没有被访问的组件会被销毁掉

    // 钩子函数
    // activated 组件被激活的时候触发
    // deactivated  组件被缓存的时候触发
    export default {
        data() {
            return{
                tabs:'tab'
            }
        },
        methods: {
            handleClick1(){
                this.tabs = 'tab'
            },
            handleClick2(){
                this.tabs = 'news'
            }
        },
        components: {
            Tab,
            News
        }
    }
</script>